import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { ComponentPropsType } from '@/components/questionComponents'
import cloneDeep from 'lodash.clonedeep'
import { insertNewComponent } from '@/utils'
import { nanoid } from 'nanoid'

export type ComponentInfoType = {
  fe_id?: string // 前端生成的 id ，服务端 Mongodb 不认这种格式，所以自定义一个 fe_id
  type: string
  title?: string
  isHidden?: boolean
  isLocked?: boolean
  props?: ComponentPropsType
}

export type ComponentsStateType = {
  componentList: ComponentInfoType[] // 组件列表
  selectedId: string // 选中的组件 id
  copiedComponent?: ComponentInfoType | null // 复制的组件
}

const initialState: ComponentsStateType = {
  componentList: [],
  selectedId: '',
  copiedComponent: null,
}

const componentsSlice = createSlice({
  name: 'components',
  initialState,
  reducers: {
    // 重置组件
    restComponent(state, action: PayloadAction<ComponentInfoType[]>) {
      state.componentList = action.payload
    },
    // 选中组件
    changeSelected(state, action: PayloadAction<string>) {
      state.selectedId = action.payload
    },
    // 添加组件
    addComponent(state, action: PayloadAction<ComponentInfoType>) {
      insertNewComponent(state, action.payload)
    },
    // 修改组件
    editComponent(state, action: PayloadAction<{ fe_id: string; props: ComponentPropsType }>) {
      const data = state.componentList.find(item => item.fe_id === state.selectedId)
      if (!data) return
      data.props = {
        ...data.props,
        ...action.payload,
      }
    },
    // 删除组件
    deleteComponent(state) {
      const index = state.componentList.findIndex(item => item.fe_id === state.selectedId)
      if (index === -1) return
      state.componentList.splice(index, 1)
      state.selectedId = ''
    },
    // 显示/隐藏组件
    changeComponentHidden(state, action: PayloadAction<{ fe_id?: string }>) {
      const current = state.componentList.find(item => item.fe_id === (action?.payload.fe_id || state.selectedId))
      if (!current) return
      current.isHidden = !current.isHidden
      state.selectedId = ''
    },
    // 锁定/解锁组件
    changeComponentLocked(state, action: PayloadAction<{ fe_id?: string }>) {
      const current = state.componentList.find(item => item.fe_id === (action?.payload.fe_id || state.selectedId))
      if (!current) return
      current.isLocked = !current.isLocked
    },
    // 复制组件
    copyComponent(state) {
      const current = state.componentList.find(item => item.fe_id === state.selectedId)
      if (!current) return
      state.copiedComponent = cloneDeep(current) // 深拷贝
    },
    // 粘贴组件
    pasteComponent(state) {
      if (!state.copiedComponent) return
      state.copiedComponent.fe_id = nanoid() // 生成新的 id
      insertNewComponent(state, state.copiedComponent)
    },
    // 修改组件标题
    changeComponentTitle(state, action: PayloadAction<{ fe_id: string; title: string }>) {
      const current = state.componentList.find(item => item.fe_id === action.payload.fe_id)
      if (!current) return
      current.title = action.payload.title
    },
  },
})
export const {
  restComponent,
  changeSelected,
  addComponent,
  editComponent,
  deleteComponent,
  changeComponentHidden,
  changeComponentLocked,
  copyComponent,
  pasteComponent,
  changeComponentTitle,
} = componentsSlice.actions
export default componentsSlice.reducer
